<template>
	<div class="s1">
		<div class="div1">
			<router-link to="cao-b" id="cao-b">
				<div class="img">
					<img src="../assets/default.jpg" alt="">
				</div>
				<div>
					<!-- <p>{}</p> -->
					<div class="shouji">
						<img src="../assets/sj_l.png" alt="">
					</div>
					<div class="wotama">
						<router-link to="cao" id="cao">
						<span>暂无绑定手机号</span>
						<img src="../assets/jiantou.png" alt="">
						</router-link>
					</div>
				</div>
			</router-link>
		</div>
		<div class="two">
			<router-link to="/yue" id="yue">
				<p id="num1">
					<span id="font1">0.00</span>元
				</p>
				<p id="name1">我的余额</p>
			</router-link>
			<router-link to="/wodeyouhui" id="wodeyouhui">
				<p id="num2">
					<span id="font2">3</span>个
				</p>
				<p id="name2">我的优惠</p>
			</router-link>
			<router-link to="/jifen" id="jifen">
				<p id="num3">
					<span id="font3">0</span>分
				</p>
				<p id="name3">我的积分</p>
			</router-link>
		</div>
		<div class="three">
			<router-link to="/myorder" id="myorder">
				<div id="img">
					<img src="../assets/dingdan0.png" alt="">
				</div>
				<div class="text">
					<span>我的订单</span>
					<img src="../assets/jiantou.png" alt="">
				</div>
			</router-link>
			<router-link to="/jifenshangcheng" id="jifenshangcheng">
				<div id="img">
					<img src="../assets/integralshop.png" alt="">
				</div>
				<div class="text">
					<span>积分商城</span>
					<img src="../assets/jiantou.png" alt="">
				</div>
			</router-link>
			<router-link to="/myorder2" id="myorder2">
				<div id="img">
					<img src="../assets/VIP.png" alt="">
				</div>
				<div class="text">
					<span>饿了么会员卡</span>
					<img src="../assets/jiantou.png" alt="">
				</div>
			</router-link>
		</div>
		<div class="three">
			<router-link to="/seac" id="seac">
				<div id="img">
					<img src="../assets/zfx.png" alt="">
				</div>
				<div class="text">
					<span>服务中心</span>
					<img src="../assets/jiantou.png" alt="">
				</div>
			</router-link>
			<router-link to="/seac1" id="seac1">
				<div id="img">
					<img src="../assets/elm.png" alt="">
				</div>
				<div class="text">
					<span>下载饿了么</span>
					<img src="../assets/jiantou.png" alt="">
				</div>
			</router-link>
		</div>
		
		<Foot></Foot>
	</div>
</template>
<script>
import Foot from "../components/foot";
	export default{
		components: {
		  Foot: Foot
		},
	}
</script>
<style scope>
	* {
		margin: 0;
		padding: 0;
	}

	body {
		background-color: #F8F8FF;
	}

	.s1 {
		width: 750px;
	}

	.div1 {
		width: 750px;
		background-color:#2B81AF;
		height: 5rem;
		box-sizing: border-box;
	}

	#cao-b {
		display: inline-block;
		width: 750px;
		height: 80px;
		display: flex;
	}
	.wotama {
		width: 620px;
		height: 80px;
		margin-left: 30px;
		display: inline-block;
		line-height: 80px;
		font-size: 40px;
		position: relative;
		border-top: 1px solid rgba(245, 245, 245);

	}

	.wotama img {
		width: 70px;
		height: 70px;
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.img {
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		overflow: hidden;
		margin-left: 0.5rem;
	}

	.img img {
		width: 3rem;
		height: 3rem;
	}

	#yue,
	#wodeyouhui,
	#jifen {
		margin-bottom: 1rem;
		background-color: white;
		border-left: 0.02rem solid #f5f5f5;
		display: inline-block;
		width: 240px;
		box-sizing: border-box;
		height: 4.21rem;
		text-align: center;
	}

	#num1,
	#num2,
	#num3 {
		margin-top: 0.4rem;
		color: #666;
		font-weight: 100;
		font-size: 0.8rem;
		text-align: center;
	}

	#name1 #name2,
	#name3 {
		box-sizing: border-box;
		color: #666;
		font-weight: 100;
		font-size: 1.1rem;
		text-align: center;
		line-height: 1.4rem;
		margin-right: 10px;
	}

	#font1 {
		font-size: 1.2rem;
		color: #ff5f3e;
		font-weight: 700;
		margin-left: 4rem;
	}

	#font2 {
		font-size: 1.2rem;
		color: #C6E746;
		font-weight: 700;
	}

	#font3 {
		font-size: 1.2rem;
		color: #C6E746;
		font-weight: 700;
	}

	#as {
		width: 700px;
		height: 300px;
		background-color: chartreuse;
	}

	#myorder,
	#jifenshangcheng,
	#myorder2 {
		display: inline-block;
		width: 750px;
		height: 80px;
		display: flex;
	}

	#img {
		width: 60px;
		height: 60px;
		padding-top: 10px;
		display: inline-block;
		margin-left: 10px;
	}

	#img img {
		width: 60px;
		height: 60px;
	}

	.three {
		width: 750px;
		height: 300px;
		background-color: ghostwhite;

	}

	.text {
		width: 620px;
		height: 80px;
		margin-left: 30px;
		display: inline-block;
		line-height: 80px;
		font-size: 40px;
		position: relative;
		border-top: 1px solid rgba(245, 245, 245);
		
	}

	.text:first-child {
		border-top: 0px
	}

	.text img {
		width: 70px;
		height: 70px;
		position: absolute;
		right: 5px;
		top: 3px;
	}

	#seac,
	#seac1 {
		display: inline-block;
		width: 750px;
		height: 80px;
		display: flex;
	}
</style>
